<template>
  <div>
    <el-dialog
      :title="formData.id ? '编辑一体杆' : '添加一体杆'"
      :visible="visible"
      width="500px"
      @close="$emit('update:visible',false)"
    >
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="140px">
        <el-form-item label="一体杆名称" prop="poleName">
          <el-input v-model="formData.poleName" placeholder="请输入一体杆名称" />
        </el-form-item>

        <el-form-item label="一体杆编号" prop="poleNumber">
          <el-input v-model="formData.poleNumber" placeholder="请输入一体杆编号" />
        </el-form-item>

        <el-form-item label="一体杆IP" prop="poleIp">

          <el-input v-model="formData.poleIp" placeholder="请输入一体杆IP" /></el-form-item>

        <el-form-item label="关联区域" prop="areaId">
          <el-input v-model="formData.areaId" placeholder="请输入关联区域" />
        </el-form-item>
        <el-form-item label="一体杆类型" prop="poleType">
          <el-input v-model="formData.poleType" placeholder="请输入一体杆类型" />
        </el-form-item>

        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button @click="$emit('update:visible',false)">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addIeceAPI, editIeceAPI } from '@/api/ieceSwing'

export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      formData: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: 0,
        poleType: ''
      },
      rules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择关联区域', trigger: 'blur' }
        ],
        poleType: [{ required: true, message: '请输入一体杆类型', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        this.formData = {
          // 手动清空formData删除功能
          poleName: '',
          poleNumber: '',
          poleIp: '',
          areaId: 0,
          poleType: ''
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 删除业务
    // async onDel(id) {
    //   await this.$confirm('确认删除吗', '温馨提示')
    //   await delBuiAPI(id)
    //   console.log(1)
    //   this.$message.success('删除成功')
    //   this.$emit('onSuccess')
    //   this.onLoad()

    // 2、子组件内定义一个方法
    // async onGetDetail(id) {
    //   const res = await getBuiDetailAPI(id)
    //   // 回填数据
    //   this.formData = {
    //     name: res.data.name,
    //     floors: res.data.floors,
    //     area: res.data.area,
    //     propertyFeePrice: res.data.propertyFeePrice,
    //     id: res.data.id
    //   }
    // },
    // async onChange() {
    //   await changBuiAPI()
    // },
    async  onSubmit() {
      await this.$refs.formRef.validate()
      // TODO发请求新增
      // 调接口

      if (this.formData.id) {
        await addIeceAPI(this.formData)
      } else {
        await editIeceAPI(this.formData)
        console.log(this.formData.id)
      }

      this.$message.success(!this.formData.id ? '添加成功' : '编辑成功')
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    }
  }
}
</script>

<style>

</style>
